iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0

今天我要來跟大家聊聊 Vue.js 中的 watch,這是一個有用的功能,特別對於要寫前端的人來說。
首先,Vue.js 是一個用來建立交互式的網頁應用程式的 JavaScript 框架。
而 watch 是 Vue.js 中的一個功能,用來監視數據的變化。
這就意味著想要追蹤一個變數或屬性的變化時,你可以使用 watch。

一開始,我們需要在 Vue 的實例中定義一個名為 watch 的對象,
然後在這個對象中指定你想要監視的屬性,以及當屬性變化時要執行的操作。例如:
Html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js Watch Example</title>
</head>
<body>

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

</body>
</html>

js:

new Vue({
  data: {
    message: 'Hello!'
  },
  watch: {
    message: function(newMessage, oldMessage) {
      console.log('新訊息: ' + newMessage);
      console.log('舊訊息: ' + oldMessage);
    }
  }
});

這個例子中,我們監視了一個叫做 message 的屬性,並且當它變化時,我們會在控制台輸出新的值和舊的值。

而在 HTML 中,我們只需要顯示這個 message 屬性,不需要額外的程式碼。
Vue 會自動更新 HTML 中的內容,當 message 屬性發生變化時。

總結一下,watch 是一個 Vue.js 中非常有用的功能,它可以幫助我們追蹤數據的變化,並在變化時執行相應的操作。這是一個必須要學會的技巧,因為可以讓前端應用更加靈活和互動性更強。


上一篇
Day20 資料客製化
下一篇
Day22 Vue元件
系列文
學習網頁前端基本的技術,包含如何使用HTML標籤跟CSS做出基本的網頁版型,了解bootstrap template如何建置網頁架構。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言